import { forwardRef, Ref, useRef, useState } from 'react';
import './App.css';
import Carousel from './components/Carousel';
import Test from './components/test';

function App(props:object,ref:Ref<any>) {
  console.log('[48;5;196m [ props ] [0m', props)
  console.log('[38;5;208m [ ref ] [0m', ref)
  const refs = useRef<any>(null);
  const [isShowSwitch, setIsShowSwitch] = useState(false);
  const [a, setA] = useState(false);

  return (
    <div className="App">
      <div className='text-center'>
        <label>
          <input type="checkbox" checked={isShowSwitch} onChange={(e: any) => {
            setIsShowSwitch(e.target.checked);
          }} />是否显示切换按钮
        </label>
        <label>
          <input type="checkbox" checked={a} onChange={(e: any) => {
            setA(!a);
          }} />改变a
        </label>
      </div>
      <button onClick={() => {
        refs.current.next();
      }}>下一页</button>
      <div>
        <Carousel autoplay={2000} showSwitch={isShowSwitch} speed={1000} hoverStop={true} onChangeCurrent={(index: number) => console.log(index)} ref={refs}>
          <div className='carousel-content'>1</div>
          <div className='carousel-content'>2</div>
          <div className='carousel-content'>3</div>
          <div className='carousel-content'>4</div>
        </Carousel>
      </div>
      <Test a={a} />
    </div>
  );
}

export default forwardRef(App);
